<ion-app>
  <form #myForm="ngForm" class="ion-page">
    <ion-header>
      <ion-toolbar>
        <ion-title>Sample Form</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content padding>
      <ion-list>
        <ion-item>
          <ion-label floating>First Name</ion-label>
          <ion-input name="firstName" #viewFirstName="ngModel" [(ngModel)]="firstName" required minlength="2"></ion-input>
        </ion-item>
        <ion-text *ngIf="viewFirstName.invalid && (viewFirstName.dirty || viewFirstName.touched)" color="danger">
          <small *ngIf="viewFirstName.errors['required']">First Name is required</small>
          <small *ngIf="viewFirstName.errors['minlength']">First Name must be at least 2 characters long</small>
        </ion-text>
        <ion-item>
          <ion-label floating>Last Name</ion-label>
          <ion-input name="lastName" #viewLastName="ngModel" [(ngModel)]="lastName" required minlength="4"></ion-input>
        </ion-item>
        <ion-text *ngIf="viewLastName.invalid && (viewLastName.dirty || viewLastName.touched)" color="danger">
          <small *ngIf="viewLastName.errors['required']">Last Name is required</small>
          <small *ngIf="viewLastName.errors['minlength']">Last Name must be at least 4 characters long</small>
        </ion-text>
        <ion-item>
          <ion-label>Desired Job Title</ion-label>
          <ion-select name="jobTitle" [(ngModel)]="jobTitle" #viewJobTitle="ngModel" required>
            <ion-select-option value="manager">Cat Herder</ion-select-option>
            <ion-select-option value="captain">Nerf Herder (Scruffy)</ion-select-option>
            <ion-select-option value="engineer">Cat</ion-select-option>
            <ion-select-option value="tester">Trier of Things</ion-select-option>
          </ion-select>
        </ion-item>
        <ion-text *ngIf="viewJobTitle.invalid && (viewJobTitle.dirty || viewJobTitle.touched)" color="danger">
          <small *ngIf="viewJobTitle.errors['required']">Job Title is required</small>
        </ion-text>
        <ion-item-divider>
          <ion-label>I Would Like To:</ion-label>
        </ion-item-divider>
        <ion-item>
          <ion-label>Drink the Beers</ion-label>
          <ion-toggle name="drinkBeers" color="dark" [(ngModel)]="drinkBeers"></ion-toggle>
        </ion-item>
        <ion-item>
          <ion-label>Drink the Teas</ion-label>
          <ion-toggle name="drinkTeas" color="secondary" [(ngModel)]="drinkTeas"></ion-toggle>
        </ion-item>
        <ion-item>
          <ion-label>Make the Coffees</ion-label>
          <ion-toggle name="makeCoffee" color="primary" [(ngModel)]="makeCoffee"></ion-toggle>
        </ion-item>
        <ion-item>
          <ion-label>Feed the Engineers</ion-label>
          <ion-toggle name="feedEngineers" color="danger" [(ngModel)]="feedEngineers"></ion-toggle>
        </ion-item>
          <ion-item>
          <ion-label floating>Short Self Description</ion-label>
          <ion-textarea name="selfDescription" #viewSelfDescription="ngModel" [(ngModel)]="selfDescription" required minlength="25"></ion-textarea>
        </ion-item>
        <ion-text *ngIf="viewSelfDescription.invalid && (viewSelfDescription.dirty || viewSelfDescription.touched)" color="danger">
          <small *ngIf="viewSelfDescription.errors['required']">Self Description is required</small>
          <small *ngIf="viewSelfDescription.errors['minlength']">Please tell us more</small>
        </ion-text>
        <ion-item>
          <ion-label floating>Desired Salary</ion-label>
          <ion-input name="desiredSalary" #viewSalary="ngModel" type="number" required [(ngModel)]="desiredSalary"></ion-input>
        </ion-item>
        <ion-text *ngIf="viewSalary.invalid && (viewSalary.dirty || viewSalary.touched)" color="danger">
          <small *ngIf="viewSalary.errors['required']">Desired Salary is required</small>
        </ion-text>
        <ion-item-divider>
          <ion-label>My Level of Happy</ion-label>
        </ion-item-divider>
        <ion-item>
          <ion-range name="levelOfHappy" [(ngModel)]="levelOfHappy">
            <ion-icon name="sad" slot="start"></ion-icon>
            <ion-icon name="happy" slot="end"></ion-icon>
          </ion-range>
        </ion-item>
      </ion-list>
    </ion-content>
    <ion-footer>
      <ion-button expand="block" [disabled]="myForm.invalid" (click)="save(myForm.value)">
        <ion-icon name="save" slot="start"></ion-icon>Looks Good to Me</ion-button>
    </ion-footer>
  </form>
</ion-app>
